<template>
    <div>
        <!--存放双创之星列表-->
        <div style="text-align: center">
            <table>
                <td v-for="star in allStars">
                    <img :src="getStarPhoto(star)" alt="" style="width: 45%;height: 45%">
                </td>
            </table>
        </div>
<!--        &lt;!&ndash;切换页数按钮&ndash;&gt;
        <div style="text-align: center">
            <el-button v-if="hasPrevious">上一页</el-button>
            <el-button v-if="hasNext" @click="jumpNext">下一页</el-button>
        </div>-->
      <div >
        <!-- 分页栏目-->
        <el-pagination
            style="padding-left: 530px;padding-bottom: 50px"
            v-model:currentPage="currentpage"
            :page-sizes="[1,2, 5, 10, 20]"
            :pager-count="11"
            layout="sizes,prev, pager, next"
            :total="totalSize"
            @current-change="handlePageChange"
            @size-change="handlePageSizeChange"
        />
      </div>
    </div>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'
import {onMounted, ref} from "vue"
import {getAllStarsByPage} from "@/api/star.js"
import router from "@/router";
export default {
  name: "Lists",
  setup() {
    const allStars = ref()
    const newssLength = ref()
    const totalSize = ref()
    const currentpage =ref(1)
    const pagesize=ref(10)

    onMounted(() => {
      getAllStarsByPage(currentpage.value, pagesize.value).then((response) => {
        const data = response.data.data.list
        totalSize.value = response.data.data.total
        allStars.value = data
        newssLength.value = data.length
        console.log(allStars.value)
      })
    })
    function getStarPhoto(row) {
      return row.starPhoto;
    }
    return {
      getStarPhoto,
      currentpage,
      totalSize,
      pagesize,
      newssLength,
      allStars,
      ArrowRight
    }

  },
  methods:{
    handlePageChange(currentPage){
      this.currentpage=currentPage
      this.queryData()
    },
    handlePageSizeChange(currentSize){
      this.pagesize=currentSize
      this.queryData()
    },
    async queryData(){
      let res = await getAllStarsByPage(this.currentpage, this.pagesize);
      this.allStars = res.data.data.list || [];
    },

    handleTableRow(row, column, event){
      router.push({path:'/newsDetail',query:{
          id:row.newsId
        }})
    }

  }
}

</script>

<style scoped lang="less">
.el-news{
  margin-bottom: 30px;
  margin-left: 300px;
  margin-right: 400px;
  .el-breadcrumb{
    width: 870px;
    height: 64px;

  }
}
.el-table{
  margin-bottom: 80px;
  margin-left: 300px;
  margin-right: 400px;
}

</style>
